import React from 'react';
import { Image, Rate } from 'antd-mobile';
import './DetailCard.scss'
function DetailCard({ item }) {
   console.log('item----《》', item);
   return (
      <div className="de_box">
         <div className='de_hd'>
            <Image
               src={
                  item.link.find((e) => e.rel === "x-stanza-cover-image-thumbnail").href +
                  "?imageView&thumbnail=240y336"
               }
               width={28 + "vw"}
               height={28 * 1.4 + "vw"}
               fit="fill"
               lazy={true}
            />
            <div className="hd_right">
               <p className='r_title'>{item.title}</p>
               {/* 作者信息 */}
               <div className="r_author">
                  <span className='category'>{item["pris:book"].category}</span>
                  <span className="list"></span>
                  <span className="author">{item.author.name}</span>
               </div>
               {/* 评分 */}
               <div>
                  <Rate style={{
                     "--star-size": "16px",
                  }} readOnly allowHalf value={item["pris:ranking"].value} />
               </div>
               {/* 点击数 */}
               <div className="r_click">
                  <span className="word">{item["pris:book"].words}字</span>
                  <span className="click">{item["pris:subscribe"].clicksCount}点击</span>
               </div>
               {/* 价格 */}
               <p className='price'>{item["pris:book"].wprice}阅点/千字</p>
            </div>
         </div>
         {/* style={{ overflow:'none', }} */}
         <div className="de_content" >
            {item.content.text}
         </div>
      </div>
   );
}

export default DetailCard;